<template>
  <a-modal
    v-model:visible="modalVisible"
    @cancel="closeModal"
    width="600px"
    :top="100"
    :align-center="false"
    title="新增对象角色权限"
    @ok="handleSubmit"
  >
    <template #footer>
      <a-button @click="closeModal">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </template>
    <a-form :auto-label-width="true" :model="form.list" ref="formRef">
      <!-- <a-form-item field="relIds" label="关联权限:" allow-clear>
        <a-cascader
          :field-names="fieldNames"
          :options="GetMenuData"
          v-model="form.list.relIds"
          check-strictly
          multiple
          :load-more="loadMore"
        />
      </a-form-item> -->
      <a-form-item label="关联对象类型:" allow-clear>
        <a-radio-group v-model="form.list.relObjType" @change="setRelObjType">
          <a-radio :value="1">用户</a-radio>
          <a-radio :value="2">用户组</a-radio>
          <a-radio :value="3">组织</a-radio>
          <a-radio :value="4">职位</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="form.list.relObjType === 1"
        label="选择用户:"
        allow-clear
      >
        <a-select
          :style="{ width: '320px' }"
          multiple
          v-model="form.list.objIds"
        >
          <a-option v-for="item in userData" :key="item.id" :value="item.id">{{
            item.name
          }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        v-if="form.list.relObjType === 4"
        label="选择职位:"
        allow-clear
      >
        <a-tree-select
          :fieldNames="{
            key: 'id',
            title: 'name',
            children: 'children'
          }"
          :multiple="true"
          :allow-clear="true"
          :allow-search="true"
          :data="positionData"
          :filter-tree-node="filterTreeNode"
          style="width: 300px"
          v-model="form.list.objIds"
        ></a-tree-select>
      </a-form-item>
      <a-form-item
        v-if="form.list.relObjType === 3"
        label="选择组织:"
        allow-clear
      >
        <a-tree-select
          :fieldNames="{
            key: 'id',
            title: 'name',
            children: 'children'
          }"
          :multiple="true"
          :allow-clear="true"
          :allow-search="true"
          :data="OrganizationData"
          style="width: 300px"
          v-model="form.list.objIds"
        ></a-tree-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { getMenuList } from '@/apis/authManagement/index';
import { GetHumanRosterList } from '@/apis/management/human/humanRoster';
// import { getUserList } from '@/apis/document/documentCenter/index';
import { GetPosition } from '@/apis/management/organization/positionManagement/index';
import { GetOrganizationList } from '@/apis/management/organization/organizationManagement/index';
import { getObjRoleRelList } from '@/apis/roleManagement/index';
import { cloneDeep } from 'lodash';
const emit = defineEmits(['update:visible', 'setObjPermission']);

const userData = ref([]);
const positionData = ref([]);
const OrganizationData = ref([]);
const setOrganizationData = ref([]);
const setUserData = ref([]);
const setPositionData = ref([]);
// 获取人员列表
const getData = async () => {
  const res = await Promise.all([
    GetPosition({ pageNumber: 0, pageSize: -1 }),
    GetHumanRosterList({
      pageNumber: 0,
      pageSize: -1,
      typeName: '4,5,6,9,10,11,12'
    }),
    GetOrganizationList()
  ]);
  positionData.value = res[0].content;
  userData.value = res[1].content;
  OrganizationData.value = res[2];
};
getData();

function filterTreeNode(searchValue, nodeData) {
  return nodeData.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
}

const props = withDefaults(
  //参数说明
  defineProps<{
    masterRoleId: any; //修改的数据
    visible: boolean; //是否打开modal
  }>(),
  {
    visible: false
  }
);
// 控制确定取消按钮
const modalVisible = computed({
  //控制visible
  get() {
    return props.visible;
  },
  set() {
    return emit('update:visible', false);
  }
});

const form = reactive<any>({
  list: {
    masterType: 2,
    masterId: props.masterRoleId,
    objIds: [],
    relObjType: 1
  }
});

const setRelObjType = (e: number) => {
  form.list.objIds = [];
};

//取消
const closeModal = () => {
  modalVisible.value = false;
  formRef.value.resetFields();
};

const formRef = ref();
const handleSubmit = async () => {
  emit('setObjPermission', cloneDeep(form.list));
  closeModal();
};

onMounted(() => {
  // getMenuData();
});
</script>
